<template>
  <!-- 排班管理页面 -->
  <div class="app-container">
    <!-- 上方筛选区域 -->
    <el-card class="box-card search-card-box">
      <el-form ref="form" label-width="100px" label-position="right">
        <el-row :gutter="20">
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="员工账号" style="margin-bottom: 0px;">
              <el-input v-model="formInline.employeeNumber" placeholder="请输入员工账号" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="员工姓名">
              <el-input v-model="formInline.name" placeholder="请输入员工姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="工作模式">
              <el-select v-model="formInline.workPatternName" placeholder="请选择工作模式">
                <el-option v-for="item in workmodeList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="月份" style="margin-top: 20px;">
              <!-- <el-input v-model="formInline.user" placeholder="请选择月份" /> -->
              <el-date-picker v-model="formInline.month" type="month" placeholder="请选择月份" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px;">
            <el-form-item label="所属机构" style="margin-top: 20px;">
              <treeselect v-model="formInline.agencyId" :options="options" :normalizer="normalize" placeholder="请选择所属机构" />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 30px; padding-right: 30px; margin-top: 20px; ">
            <el-button type="primary" @click="searchFn">搜索</el-button>
            <el-button @click="resetFn">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 下方表格区域 -->
    <el-card class="box-card table-card-box" style="margin-top: 20px;">
      <!-- 按钮区域 -->
      <el-button type="primary" style="margin-bottom: 20px;" @click="$router.push('workSetting')">排班设置</el-button>
      <el-button
        style="margin-bottom: 20px;
        background: #ffeeeb;
        border-color: #f3917c;
        color: #e15536;"
        @click="bindWork"
      >绑定排班</el-button>
      <!-- 表格区域 -->
      <el-table
        v-loading="isLoading"
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          fixed
          width="55"
        />

        <el-table-column
          prop="employeeNumber"
          label="员工账号"
          fixed
          width="120"
        />
        <el-table-column
          prop="name"
          label="员工姓名"
          width="120"
          fixed
        />
        <el-table-column
          prop="phone"
          label="员工电话"
          width="120"
          fixed
        />
        <el-table-column
          prop="userType"
          label="员工角色"
          width="120"
          fixed
        >
          <template v-slot="{row}">
            <span v-if="row.userType===1">员工</span>
            <span v-else-if="row.userType===2">快递员</span>
            <span v-else-if="row.userType===3">司机</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="workPatternName"
          label="当前工作模式"
          width="120"
          fixed
        />
        <el-table-column
          v-for="(day,index) in daysInMonth"
          :key="index"
          :prop="`workSchedules[${day}]`"
          :label="`${day}`"
        >
          <template v-slot="{row}">
            <span v-if="row.workSchedules[day]" class="work">上</span>
            <span v-else class="reset">休</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row style="height: 60px; margin-top: 20px;" type="flex" justify="center">
        <el-pagination
          :current-page="formInline.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changePageSize"
          @current-change="changePage"
        />
      </el-row>
    </el-card>
    <!-- 绑定排班的dialog -->
    <el-dialog title="人工调整" :visible="isShow" width="566px">
      <el-form label-width="120px">
        <el-form-item class="worktype">
          <el-radio v-model="radio" label="1">礼拜制</el-radio>
          <el-radio v-model="radio" label="2">连续制</el-radio>
        </el-form-item>
        <el-form-item label="模式名称：">
          <el-select v-model="formInline.workPatternName" class="history-name" placeholder="请选择">
            <el-option v-for="item in workmodeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="isShow = false">确 定</el-button>
        <el-button @click="isShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getWorkListApi, getWorkModeListApi } from '@/api/courier'
import { getDepartTree } from '@/api/base'
export default {
  components: { Treeselect },
  data() {
    return {
      radio: '1',
      isShow: false,
      daysInMonth: 31,
      value1: '',
      isLoading: true,
      total: 0,
      formInline: {
        page: 1,
        pageSize: 10,
        employeeNumber: '',
        name: '',
        workPatternName: '',
        month: '',
        agencyId: null
      },
      tableData: [],
      options: [],
      workmodeList: [] // 工作模式下拉列表
    }
  },
  created() {
    this.initTable()
    this.getTree()
  },
  methods: {
    async  initTable() {
      this.isLoading = true
      const res = await getWorkListApi(this.formInline)
      // console.log(res)
      this.tableData = res.items
      this.total = Number(res.counts)
      // console.log(this.tableData)
      // console.log(this.tableData[0].workSchedules)
      const workmode = await getWorkModeListApi()
      // this.workmodeList.push(workmode[1])
      // this.workmodeList.push(...workmode[2])
      this.workmodeList = [...workmode[1], ...workmode[2]]
      console.log(this.workmodeList)
      // console.log(workmode[1])
      // console.log(workmode[2])
      // console.log(this.workmodeList)
      this.isLoading = false
    },
    // 重置功能
    resetFn() {
      // 清空表单
      this.$refs.form.$el.reset()
      // 复原数据
      this.formInline = {
        page: 1,
        pageSize: 10,
        employeeNumber: '',
        name: '',
        workPatternName: '',
        month: '',
        agencyId: null
      }
      this.initTable()
    },
    // 搜索功能
    searchFn() {
      console.log(123)
      // console.log('submit!')
      this.initTable()
    },
    // 自定义键名
    normalize(node) {
      return {
        id: node.id, // 使用自定义键名 label
        label: node.name,
        children: node.children
      }
    },
    // 得到所属机构的树形结构
    async getTree() {
      const res = await getDepartTree()
      // console.log(JSON.parse(res))
      this.options = JSON.parse(res)
      // console.log(this.options)
    },
    // 改变每页的条数
    changePageSize(val) {
      // console.log(`每页 ${val} 条`)
      this.formInline = {
        page: 1,
        pageSize: 10,
        employeeNumber: '',
        name: '',
        workPatternName: '',
        month: '',
        agent: ''
      }
      this.formInline.pageSize = val
      this.initTable()
    },
    // 改变当前页码
    changePage(val) {
      // console.log(`当前页: ${val}`)
      this.formInline = {
        employeeNumber: '',
        name: '',
        workPatternName: '',
        month: '',
        agent: ''
      }
      this.formInline.page = val
      this.initTable()
    },
    // 绑定排班
    bindWork() {
      this.isShow = true
      console.log(123)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .history-name .el-input__inner {
    width: 293px;
}
::v-deep .worktype .el-form-item__content {
    margin-left: 40px!important;
}
::v-deep .el-dialog {
  border-radius: 8px;
}
::v-deep .el-dialog__header {
  padding: 15px 30px 15px;
  background-color: #f3f4f7;
  border-radius: 8px 8px 0 0;
}
::v-deep .el-card{
  overflow: visible;
}
.reset{
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #eff3f8;
  border: 1px solid #d8dde3;
  border-radius: 50%;
  text-align: center;
  color: #20232a;
  font-size: 13px;
}
.work{
  display: inline-block;
  width: 24px;
  height: 24px;
  background: #ffeeeb;
  border: 1px solid #e15536;
  border-radius: 50%;
  text-align: center;
  color: #e15536;
  font-size: 13px;
}
  .app-container {
  .search-card-box{
    .el-col{
     ::v-deep .el-form-item__label{
        color: #20232a;
        font-weight: 400;
        text-align: right;
        padding-left: 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        white-space: nowrap;
      }
    }

    .el-input{
      position: relative;
      font-size: 14px;
      display: inline-block;
      width: 100%;
    }
    .el-form-item{
      margin-bottom: 0;

    }
    .el-button{
      width: 90px;
      height: 40px;
      padding: 10px 20px!important;
      border-radius: 5px!important;
      font-weight: 400;
    }
  }
}
.tableColumn-status:before {
    width: 6px;
    height: 6px;
    background: #1dc779;
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: 6px;
    }
    .stop-use:before {
    background-color: #e15536;
}

</style>
